<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生JS编写的Carousel轮播头图,使用了es6的部分语法</title>
	<style>
	.carousel{
		position:relative;
		width:1224px;
		margin: 50px auto;
		overflow:hidden;
		--img-width:-1224px;
	}
	.imgWrap{
		/* 这里的图片容器我给了一个足够大的宽度 */
		width:9999px;
		height:500px;
		/* 为了消除图片之间的间距，使用font-size:0; */
		font-size: 0;
		transform:translateX(var(--img-width));
		transition:all .6s ease-in;
	}
	.imgWrap>img{
		width:1224px;
		height:500px;
	}
	.wardWrap{
		position:absolute;
		top:50%;
		transform: translateY(-50%);
		display:flex;
		justify-content: space-between;
		width:100%;
		padding: 0 50px;
		box-sizing: border-box;
	}
	.wardWrap>img{
		/*display:none;*/
		width:100px;
		height:100px;
		opacity:0;
		transition: opacity .1s linear;
	}
	.wardWrap>img:hover{
		opacity: 1;
	}
	.z-show>img{
		/*display:block;*/
		opacity:.48;
	}
	.cursors{
		position:absolute;
		bottom:20px;
		left:50%;
		transform: translateX(-50%);
		padding: 0;margin:0;
		list-style: none;
	}
	.cursors>li{
		/*width:100px;height:10px;*/
		display:inline-block;
		padding:12px 4px;
		font-size: 0;
		cursor: pointer;
	}
	.cursors i{
		display:inline-block;
		width:80px;height: 4px;
		background-color: #fff;
		opacity: .48;
		transition: opacity .3s;
	}
	/* 状态：改变cursor透明度 */
	.z-active i{
		opacity: 1;
	}
	/* 功能：浮动及其浮动清除 */
	.f-cb{float:left;}
	.f-cb:after{display:block;clear:both;overflow:hidden;content:'';}
	</style>
</head>

<body>
	<div class='carousel'>
		<div class='imgWrap'>
			<img src='./images/banner_05.jpg'>
			<img src='./images/banner_00.jpg'>
			<img src='./images/banner_01.jpg'>
			<img src='./images/banner_02.jpg'>
			<img src='./images/banner_03.jpg'>
			<img src='./images/banner_04.jpg'>
			<img src='./images/banner_05.jpg'>
		</div>
		<div class='wardWrap'>
			<img src='./images/forward.png'>
			<img src='./images/backward.png'>
		</div>
		<ul class='cursors f-cb'>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
		</ul>
	</div>
<script>
!function(){
	let addEvent = document.addEventListener ?
		(elem,type,listener,useCapture)=>{
			elem.addEventListener(type,listener,useCapture);
		} : 
		(elem,type,listener,useCapture)=>{
			elem.attachEvent('on'+type,listener);
		};
	let delEvent = document.removeEventListener ?
		(elem,type,listener,useCapture)=>{
			elem.removeEventListener(type,listener,useCapture);
		} : 
		(elem,type,listener,useCapture)=>{
			elem.detachEvent('on'+type,listener);
		};

	let $ = selector=>{
		return [].slice.call(document.querySelectorAll(selector));
	}
	let addClass = (node,className)=>{
		let current = node.className||'';
		if((' '+current+' ').indexOf(' '+className+' ')===-1){
			node.className = current?(current+' '+className):className;
		}
	}
	let delClass = (node,className)=>{
		let current = node.className||'';
		node.className = (' '+current+' ').replace(' '+className+' ',' ').trim();
	}

	let prev = 5,
			current = 0,
			next = 1,
			imgW = 1224,
			intervalTime = 1500;
	let cursors = $('li');
	let imgWrap = $('.imgWrap')[0];
	// 定义导航cursors事件
	for(let i=0,cursor;cursor=cursors[i];i++){
		// console.log('index:',i)
		addEvent(cursor,'mouseenter',(ev)=>{
			if(intervalID)clearInterval(intervalID)
			current = i;
			if(current==0){
				prev = 5;
			}else{
				prev = i-1;
			}
			if(current==5){
				next = 0;	
			}else{
				next = i+1;
			}
			// console.log(imgWrap.style.height)
			go(current+1);
			// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
			// console.log(`translateX(-${(current+1)*imgW}px)`)
		})
		addEvent(cursor,'mouseleave',()=>{
			// console.log('mouseleave');
			intervalID = setInterval(autoPlay, intervalTime);
		})
	}
	let go = step=>{
		imgWrap.style.transform = `translateX(-${step*imgW}px) translateZ(0)`;
		cursorClass();
	}
	let cursorClass = ()=>{
		for(let cursor of cursors){
			delClass(cursor,'z-active')
		}
		addClass(cursors[current],'z-active');
	}
	let changeIndex = ()=>{
		if(current==0){
			prev = 5;
			next = current+1;
		}else if(current==5){
			prev = current-1;
			next = 0;
		}else{
			prev = current-1;
			next = current+1;
		}
	}
	addClass(cursors[0],'z-active');
	// 自动轮播 间隔1s
	let autoPlay = ()=>{
		if(current==5) {
			current=0;
			new Promise(resolve=>{
			  imgWrap.style.transition = `all 0s`;
				// imgWrap.style.transform = `translateX(0) translateZ(0)`;
				go(0)
			  resolve();
			}).then(()=>{
				setTimeout(()=>{
					imgWrap.style.transition = `all .6s ease-in`;
					go(current+1);
					changeIndex();
					// prev = 5;
					// next = current+1;
					// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
				}, 200);
			})
		}else{
			current++;
			go(current+1);
			changeIndex();
			// prev = current-1;
			// if(current==5){
			// 	next = 0;
			// }
			// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
		}
		// cursorClass();
	}
	let intervalID = setInterval(autoPlay, intervalTime);
	// 设置前后按键
	let carousel = $('.carousel')[0]
	// console.log(carousel);
	let wardWrap = $('.wardWrap')[0]
	// console.log(wardWrap);
	let oWard = $('.wardWrap>img')
	// console.log(oWard);
	addEvent(carousel,'mouseenter',()=>{
		addClass(wardWrap,'z-show');
	})
	addEvent(carousel,'mouseleave',()=>{
		delClass(wardWrap,'z-show');	
	})
	
	// 上一张
	addEvent(oWard[0],'click',()=>{
		clearInterval(intervalID);
		// console.log('prev:',prev);
		go(prev+1);
		current = prev;
		changeIndex();
		intervalID = setInterval(autoPlay, intervalTime);
	})
	// 下一张
	addEvent(oWard[1],'click',()=>{
		clearInterval(intervalID);
		console.log('next:',next);
		go(next+1);
		current = next;
		changeIndex();
		intervalID = setInterval(autoPlay, intervalTime);
	})
}();
</script>
</body>
</html>